import React from 'react'
import { Row, Col, Checkbox, Select, InputNumber } from 'antd'
import { PIVOT_CHART_ACTION_OPTIONS } from 'app/globalConstants'
import ColorPicker from 'components/ColorPicker'
const Option = Select.Option
const styles = require('../Workbench.less')
import { getCorrectInputNumber } from '../../util'


// chart指针跳动

export interface ILoopTimerConfig {
  show: boolean,
  actionType: string,
  lineColor: string,
  tooltipColor: string,
  time: number,
}


interface IShadowProps {
  title: string
  config: ILoopTimerConfig
  onChange: (prop: string, value: any) => void
}

export class LoopTimerSection extends React.PureComponent<IShadowProps, {}> {

  private checkboxChange = (prop) => (e) => {
    this.props.onChange(prop, e.target.checked)
  }

  private selectChange = (prop) => (value) => {
    this.props.onChange(prop, value)
  }

  private inputNumberChange = (prop) => (value) => {
    this.props.onChange(prop, getCorrectInputNumber(value))
  }

  private colorChange = (prop) => (color) => {
    this.props.onChange(prop, color)
  }
  public render() {
    const { title, config } = this.props
    const {
      show,
      actionType,
      lineColor,
      tooltipColor,
      time
    } = config

    const fontFamilies = PIVOT_CHART_ACTION_OPTIONS.map((f) => (
      <Option key={f.value} value={f.value}>{f.name}</Option>
    ))

    return (
      <div className={styles.paneBlock}>
        <h4>{title}</h4>
        <div className={styles.blockBody}>
          <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
            <Col span={2}>
              <Checkbox
                checked={show}
                onChange={this.checkboxChange('show')}
              />
            </Col>
            <Col span={10}>指针跳动开关</Col>

          </Row>
          <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
            <Col span={2} />
            <Col span={10}>动画效果选择</Col>
            <Col span={12}>
              <Select
                placeholder="指针跳动开关"
                className={styles.blockElm}
                value={actionType}
                onChange={this.selectChange('actionType')}
              >
                {fontFamilies}
              </Select>
            </Col>
          </Row>
          <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
            <Col span={2} />
            <Col span={6}>指针跳动时间</Col>
            <Col span={4}>
              <InputNumber placeholder="time" className={styles.blockElm} value={time} onChange={this.inputNumberChange('time')} />
            </Col>
          </Row>
          <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
            <Col span={6}>
              浮框背景
            </Col>
            <Col span={4}>
              <ColorPicker
                value={tooltipColor}
                onChange={this.colorChange('tooltipColor')}
              />
            </Col>
          </Row>
          <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
            <Col span={6}>
              指针颜色
              </Col>
            <Col span={6}>
              <ColorPicker
                value={lineColor}
                onChange={this.colorChange('lineColor')}
              />
            </Col>
          </Row>
        </div>
      </div>
    )
  }
}

export default LoopTimerSection
